const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 简单创建html文件，用于服务器访问
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口
    entry: path.resolve(__dirname, 'src/main.js'),
    mode: 'development', //'production' | 'develoopment' | 'none'
    // 出口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        // 创建模块时，匹配请求的规则数组
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.less/,
                loader: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /.(jpg|png|jpeg)$/,
                loader: ['url-loader', 'file-loader']
            }
        ]
    },
    // 解析resolve
    resolve: {
        // 自动解析确定的扩展,
        //也就是使用户在引入自己的模块时可以不写扩展,如aa.vue => aa
        extensions: [
          '.vue', '.js'
        ],
        // 告诉 webpack 解析模块时应该搜索的目录
        modules: ["node_modules"],
        // 创建一个别名
        // 比如'@': path.resolve('src')，使用@默认指向src文件夹
        alias: {
          vue: 'vue/dist/vue.min.js',
          components: path.resolve(__dirname + '/src'),
          '@': path.resolve('src')
        }
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            title: '初始结构',
        }),
        new VueLoaderPlugin()
    ],
    // 开发配置
    devServer: {
        // 任意的 404 响应都可能需要被替代为 /dist/index.html
        historyApiFallback: {
            index: '/dist/index.html'
        },
        // 默认是localhost
        host: '127.0.0.1',
        // 端口号
        port: 3000,
        // 热重载
        hot: true,
        proxy: {
            "/api": {
                target: "http://localhost:3000"
            }
        }
    }
}